<template>
    <view class="content">
        <uni-nav-bar title="我的盒柜" color="#fff" backgroundColor="transparent" :fixed="true" :statusBar="true" :border="false"></uni-nav-bar>

        <!-- <view class="header">
      <view
        :style="{
          height: `calc(${$sys().statusBarHeight}px)`
        }"
      ></view>
      <view class="header-left-title">
        <image :src="$img('/static/img2/cc5.png')" mode="scaleToFill" />
      </view>
    </view> -->

        <view class="tab">
            <view class="tab-item" v-for="(item, i) in tabList" :key="i" :class="{
          act: tabCur == i
        }" @click="tabChange(i)">
                <text>{{ item.title }}</text>

                <view class="act-tag icon">
                    <image v-if="tabCur == i" :src="$img('/static/img2/cc190.png')" lazy-load></image>
                </view>
            </view>
        </view>

        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption" :up="upOption">
            <template v-if="tabList[tabCur].id == 1">
                <view class="search">
                    <view class="input-box">
                        <input v-model="keyword" placeholder="请输入关键字" />

                        <view class="icon" @click="tabChange(tabCur)">
                            <image :src="$img('/static/img2/cc208.png')" lazy-load></image>
                        </view>
                    </view>

                    <view class="rule" @click="$refs.rulePop.getRule(10, '发货规则')">
                        <view class="que icon">
                            <image :src="$img('/static/img2/cc207.png')" lazy-load></image>
                        </view>
                        说明
                    </view>
                </view>

                <view class="sub-tab">
                    <view class="sub-tab-item common_bg" v-for="(item, i) in subTab" :key="i" :class="{
              act: subTabCur == i
            }" @click="subTabChange(i)">
                        <text>{{ item.title }}</text>

                        <view class="bar icon">
                            <image v-if="subTabCur == i" :src="$img('/static/img2/cc190.png')" lazy-load></image>
                        </view>
                    </view>
                </view>

                <view class="num-all">
                    <view class="num">
                        共{{ nowNum }}
                        <!-- <text></text> -->
                        个赏品
                    </view>

                    <view class="all">
                        已选
                        <text>{{ nowChooseNum }}</text>
                        个
                    </view>
                </view>

                <view class="list">
                    <template v-for="(item, i) in listData">
                        <view class="list-item" v-for="(a, b) in item.orderlist" :key="a.prize_code">
                            <view class="item-hd c_bg" :style="{
                  backgroundImage: `url(${$img('/static/img2/cc213.png')})`
                }">
                                <view class="pic">
                                    <image :src="a.goodslist_imgurl" lazy-load></image>

                                    <view class="type c_bg" :style="{
                      backgroundImage: `url(${$img('/static/img2/cc212.png')})`
                    }">
                                        {{ a.shang_title }}
                                    </view>

                                    <view class="num">×{{ a.prize_num }}</view>
                                </view>

                                <view class="name hang1">{{ a.goodslist_title }}</view>

                                <view class="price">
                                    {{ a.goodslist_money * 1 > 0 ? `可兑换:${a.goodslist_money}` : `不可兑换` }}
                                </view>
                            </view>

                            <view class="num-box">
                                <view class="icon" @click="jian(a)">
                                    <image :src="$img('/static/img2/cc210.png')" lazy-load></image>
                                </view>

                                <input v-model="a.chooseNum" @blur="verifyNum(a)" />

                                <view class="icon" @click="jia(a)">
                                    <image :src="$img('/static/img2/cc211.png')" lazy-load></image>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
            </template>

            <view v-else class="order-list">
                <view class="order-item" v-for="(item, i) in listData" :key="i">
                    <view class="order-hd">
                        <view class="time">{{ item.addtime }}</view>

                        <view class="status">{{ item.status_name }}</view>
                    </view>

                    <scroll-view class="order-bd" scroll-x>
                        <view class="order-goods" v-for="(a, b) in item.order_list" :key="b">
                            <view class="pic">
                                <image :src="a.goodslist_imgurl" lazy-load></image>

                                <view class="type">{{ a.shang_title }}</view>

                                <view class="num">×{{ a.prize_num }}</view>
                            </view>

                            <view class="title hang1">
                                {{ a.goodslist_title }}
                            </view>
                        </view>
                    </scroll-view>

                    <view class="line"></view>

                    <view class="order-btns">
                        <view class="btn" @click="toOrder(item)">
                            <image :src="$img('/static/img2/cc126.png')" lazy-load></image>

                            <!-- 查看详情 -->
                        </view>

                        <template v-if="item.status == 2">
                            <view class="btn" @click="toExpress(item)">
                                <image :src="$img('/static/img2/cc125.png')" lazy-load></image>

                                <!-- 查看物流 -->
                            </view>

                            <view class="btn act" @click="submitGet(item)">
                                <image :src="$img('/static/img2/cc127.png')" lazy-load></image>

                                <!-- 确认收货 -->
                            </view>
                        </template>
                    </view>
                </view>
            </view>
        </mescroll-body>

        <view class="right-fixed">
            <view class="fbtn" @click="tabChange(tabCur)">
                <image :src="$img('/static/img2/cc214.png')" lazy-load></image>
            </view>

            <view class="fbtn" :class="{
          dis: !isAll
        }" @click="chooseAll">
                <image :src="$img('/static/img2/cc215.png')" lazy-load></image>
            </view>
        </view>

        <view v-if="tabList[tabCur].id == 1" class="bt-fixed">
            <template v-if="subTab[subTabCur].id != 4">
                <!-- <view
          class="btn common_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc216.png')})`
          }"
          @click="open('changePop')"
        >
          兑换
        </view> -->
                <view v-if="showChange == 1 && subTab[subTabCur].id != 6 && listData.length > 0 && lvShowChange" class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc216.png')})`
          }" @click="open('changePop')">
                    兑换
                </view>

                <view v-if="subTab[subTabCur].id != 2" class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc216.png')})`
          }" @click="open('sendPop')">
                    发货
                </view>

                <!-- <view
          v-if="
            showMarket == 1 &&
            subTab[subTabCur].id != 2 &&
            subTab[subTabCur].id != 6
          "
          class="btn act common_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc216.png')})`
          }"
          @click="toSendMarket"
        >
          <text>发布集市</text>
        </view> -->

                <view v-if="subTab[subTabCur].id != 6" class="btn common_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc216.png')})`
          }" @click="open('model')">
                    上锁
                </view>
            </template>

            <view v-else class="btn common_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc216.png')})`
        }" @click="open('model')">
                解锁
            </view>
        </view>

        <tab-bar :index="3"></tab-bar>

        <uni-popup ref="changePop" type="bottom">
            <view class="change-pop c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc71.png')})`
        }">
                <view class="change-pop-hd">
                    兑换确认

                    <view class="close icon" @click="close('changePop')">
                        <image :src="$img('/static/img2/cc75.png')" lazy-load></image>
                    </view>
                </view>

                <view class="hd-line"></view>

                <view class="change-pop-bd">
                    <scroll-view class="bd-goods" scroll-x>
                        <view class="goods-item" v-for="(item, i) in handelList" :key="i">
                            <view class="pic">
                                <image :src="item.goodslist_imgurl" lazy-load></image>

                                <view class="type">{{ item.shang_title }}</view>

                                <view class="num">×{{ item.chooseNum }}</view>
                            </view>

                            <view class="title hang1">
                                {{ item.goodslist_title }}
                            </view>

                            <view class="price">兑换价:{{ item.goodslist_money * item.chooseNum }}</view>
                        </view>
                    </scroll-view>

                    <view class="bd-bt">
                        <view class="choose-num">
                            已选
                            <text>{{ nowChooseNum }}</text>
                            件赏品
                        </view>

                        <view class="choose-money">
                            共计可兑换
                            <text>
                                {{ totalChangeMoney }}
                            </text>
                        </view>
                    </view>
                </view>

                <view class="change-pop-ft c_bg" :style="{
            backgroundImage: `url(${$img('/static/img2/cc78.png')})`
          }" @click="$c.noDouble(submitChange)">
                    确认兑换
                </view>
            </view>
        </uni-popup>

        <uni-popup ref="sendPop" type="bottom">
            <view class="send-pop c_bg" :style="{
          backgroundImage: `url(${$img('/static/img2/cc71.png')})`
        }">
                <view class="send-pop-hd">
                    发货确认

                    <view class="close icon" @click="close('sendPop')">
                        <image :src="$img('/static/img2/cc75.png')" lazy-load></image>
                    </view>
                </view>

                <view class="hd-line"></view>

                <view class="send-pop-card">
                    <scroll-view class="card-goods" scroll-x>
                        <view class="goods-item" v-for="(item, i) in handelList" :key="i">
                            <view class="pic">
                                <image :src="item.goodslist_imgurl" lazy-load></image>

                                <view class="type">{{ item.shang_title }}</view>

                                <view class="num">×{{ item.chooseNum }}</view>
                            </view>

                            <view class="title hang1">
                                {{ item.goodslist_title }}
                            </view>
                        </view>
                    </scroll-view>

                    <view class="card-num">
                        <view>已选赏品</view>

                        <view>
                            共
                            <text>{{ nowChooseNum }}</text>
                            件
                        </view>
                    </view>
                </view>

                <view class="address" @click="chooseAdd">
                    <view v-if="!addData" class="add-choose">请选择收货地址</view>

                    <view v-else class="add-info">
                        <view class="name-phone">
                            <view>{{ addData.userName }}</view>

                            <view class="phone">{{ addData.telNumber }}</view>
                        </view>

                        <view class="add-text hang2">
                            {{ addData.provinceName }}-{{ addData.cityName }}-{{ addData.countyName }}-{{
                addData.detailInfo
              }}
                        </view>
                    </view>

                    <view class="icon">
                        <image :src="$img('/static/img2/cc121.png')" lazy-load></image>
                    </view>
                </view>

                <view class="freight border">
                    <view>快递(满{{ freightData.free_post }}件包邮)</view>

                    <view>
                        <text>
                            {{ nowChooseNum >= freightData.free_post ? '包邮' : `¥${freightData.post_money}` }}
                        </text>
                    </view>
                </view>

                <view class="remark border">
                    <view class="remark-title">备注</view>

                    <view class="textarea">
                        <textarea v-model="remark" placeholder="请输入备注说明" />
                        </view>
        </view>

        <view
          class="send-pop-ft c_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc78.png')})`
          }"
          @click="$c.noDouble(submitSend)"
        >
          确认发货
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="model" type="center">
      <view class="model">
        <view
          class="model-box c_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc122.png')})`
          }"
        >
          <view class="model-hd">提示</view>

          <view class="model-bd">{{ lockMsg }}</view>
        </view>

        <view class="model-ft">
          <view
            class="model-btn c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc123.png')})`
            }"
            @click="close('model')"
          >
            <!-- 取消 -->
          </view>

          <view
            class="model-btn act c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc124.png')})`
            }"
            @click="$c.noDouble(submitLock)"
          >
            <!-- 确定 -->
          </view>
        </view>
      </view>
    </uni-popup>

    <rule-pop ref="rulePop"></rule-pop>
  </view>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            remark: '',

            // 下拉刷新的配置(可选, 绝大部分情况无需配置)
            downOption: {
                auto: false
            },
            // 上拉加载的配置(可选, 绝大部分情况无需配置)
            upOption: {
                auto: true,
                page: {
                    size: 10 // 每页数据的数量,默认10
                }
            },
            tabList: [
                {
                    id: 1,
                    title: '全部'
                },
                {
                    id: 2,
                    status: 1,
                    title: '申请提货'
                },
                {
                    id: 3,
                    status: 2,
                    title: '已发货'
                },
                {
                    id: 4,
                    status: 3,
                    title: '完成提货'
                }
            ],
            tabCur: 0,
            subTab: [
                {
                    id: 1,
                    title: '赏品'
                },
                // {
                //   id: 5,
                //   title: '无限赏'
                // },
                //  {
                // id:3,
                //   title: '宝箱'
                // },
                {
                    id: 4,
                    title: '保险柜'
                },
                {
                    id: 2,
                    title: '预售'
                }
                // {
                //   id: 6,
                //   title: '明信片'
                // }
            ],
            subTabCur: 0,
            addData: '',
            listData: [],
            total: 0,
            handelList: [],
            addData: '',
            lockMsg: '',
            freightData: '',
            showMarket: 0,
            showChange: 0,
            canReload: false,
            lvShowChange: false,
            payWay: 'ali_wap',
            intervalId: null,
        }
    },

    onShow() {
        if (uni.getStorageSync('token')) {
            this.getUserInfo()
        }

        this.canReload && this.tabChange(this.tabCur)
        this.canReload = true
    },

    computed: {
        /* 当前选中可兑换金额 */
        totalChangeMoney() {
            if (this.tabList[this.tabCur].id != 1) return

            if (this.handelList.length <= 0) {
                return 0
            }

            return this.handelList.reduce((pre, item) => pre + item.chooseNum * item.goodslist_money, 0)
        },

        /* 是否全选 */
        isAll() {
            if (this.tabList[this.tabCur].id != 1) return

            if (this.listData.length <= 0) {
                return false
            }

            return this.nowNum == this.nowChooseNum
        },

        /* 当前选中数量 */
        nowChooseNum() {
            if (this.tabList[this.tabCur].id != 1) return

            const arr = this.getChooseGoods()

            return arr.reduce((pre, item) => pre + Number(item.chooseNum), 0)
        },

        /* 当前赏品总数 */
        nowNum() {
            if (this.tabList[this.tabCur].id != 1) return

            const arr = []

            this.listData.forEach(item => {
                item.orderlist.forEach(a => {
                    arr.push(a)
                })
            })

            return arr
                .filter(item => item.prize_num > 0)
                .reduce((pre, item) => pre + Number(item.prize_num), 0)
        }
    },

    onReady() {
        // this.open('changePop')
        // this.open('sendPop')
        // this.open('model')
    },
    beforeDestroy() {
        clearInterval(this.intervalId)
    },
    methods: {
        getUserInfo() {
            let that = this
            that.req({
                url: 'user',
                success(res) {
                    if (res.status == 1) {
                        uni.setStorageSync('userinfo', res.data.userinfo)

                        /* 判断集市是否展示 */
                        if (res.data.userinfo.js_is_open == 1 && res.data.userinfo.is_show_js == 1) {
                            that.showMarket = 1
                        }
                        /* 判断兑换是否展示 */
                        if (res.data.userinfo.dh_is_open == 1) {
                            that.showChange = 1
                        }
                        /* 兑换等级显示 */
                        if (res.data.userinfo.quan_yi_level.level >= res.data.userinfo.is_exchange_level) {
                            that.lvShowChange = true
                        }
                    }
                }
            })
        },

        toSendMarket() {
            this.handelList = []
            const choose = this.getChooseGoods()

            if (choose.length <= 0) {
                this.$c.toast({
                    title: '请选择赏品'
                })
                return
            }

            let arr = []
            choose.map(item => {
                arr = arr.concat(item.order_list_ids1)
            })

            if (arr.length > 1) {
                this.$c.toast({
                    title: '只可选择一件赏品'
                })
                return
            }

            this.req({
                url: 'js_market_price',
                data: {
                    order_list_ids: arr.join(',')
                },
                success: res => {
                    if (res.status == 1) {
                        uni.setStorageSync('_market_ids', arr)
                        this.$c.to({
                            url: '/package/mine/market-send'
                        })
                    }
                }
            })
        },

        submitGet(item) {
            this.req({
                url: 'warehouse_send_confirm',
                data: {
                    id: item.id
                },
                success: res => {
                    if (res.status == 1) {
                        this.$c.toast({
                            title: res.msg,
                            duration: 500,
                            success: () => {
                                this.tabChange(this.tabCur)
                            }
                        })
                    }
                }
            })
        },

        toExpress(item) {
            this.$c.to({
                url: '/pages/user/wuliu_detail',
                query: {
                    id: item.id
                }
            })
        },

        toOrder(item) {
            this.$c.to({
                url: '/pages/user/order',
                query: {
                    id: item.id
                }
            })
        },

        chooseAdd() {
            this.canReload = false

            uni.chooseAddress({
                success: res => {
                    this.addData = res
                },
                fail: error => {
                },
                complete: res => {
                    setTimeout(() => {
                        this.canReload = true
                    }, 500)
                }
            })
        },

        submitLock() {
            let url = 'warehouse_movein'
            let data = this.handelList.map(item => {
                return {
                    prize_code: item.prize_code,
                    number: item.chooseNum
                }
            })

            if (this.subTab[this.subTabCur].id == 4) {
                url = 'warehouse_remove'
            }

            this.req({
                url,
                data: {
                    recovery_info: JSON.stringify(data)
                },
                success: res => {
                    if (res.status == 1) {
                        this.close('model')

                        this.$c.toast({
                            title: res.msg,
                            duration: 500,
                            success: () => {
                                this.tabChange(this.tabCur)
                            }
                        })
                    }
                }
            })
        },

        submitSend() {
            let _this = this
            clearInterval(_this.intervalId)
            if (!_this.addData) {
                _this.$c.toast({
                    title: '请选择地址'
                })
                return
            }

            let data = _this.handelList.map(item => {
                return {
                    prize_code: item.prize_code,
                    number: item.chooseNum
                }
            })
            _this.req({
                url: 'warehouse_send',
                data: {
                    recovery_info: JSON.stringify(data),
                    type: _this.subTab[_this.subTabCur].id,
                    name: _this.addData.userName,
                    mobile: _this.addData.telNumber,
                    pay_way: _this.payWay,
                    address:
                        _this.addData.provinceName +
                        _this.addData.cityName +
                        _this.addData.countyName +
                        _this.addData.detailInfo,
                    // name: '张三',
                    // mobile: '13355852333',
                    // address: '收货地址收货地址',
                    message: _this.remark
                    // ad_id: uni.getStorageSync('_ad_id')
                },
                success: async res => {
                    if (res.status == 1) {
                        _this.close('sendPop')
                        _this.remark = ''

                        if (res.data.status == 1) {
                            if (_this.payWay == 'ali_wap') {
                                uni.showModal({
                                    title: '支付链接,复制到浏览器打开完成支付',
                                    content: res.data.res,
                                    cancelText: '复制',
                                    confirmText: '取消支付',
                                    success: (e) => {
                                        if (e.cancel) {
                                            uni.setClipboardData({
                                                data: res.data.res,
                                                success() {
                                                    uni.showToast({ title: '复制成功' });
                                                    setTimeout(function () {
                                                        _this.intervalId = setInterval(() => {
                                                            _this.getPrize(res.data.order_no)
                                                        }, 1500)
                                                    }, 2000);
                                                }
                                            });

                                        }

                                    },
                                });
                            } else {
                                const status = await _this.$c.wxMpPay({
                                    data: res.data.res
                                })

                                if (status == 'success') {
                                    _this.tabChange(_this.tabCur)
                                }
                            }

                        } else {
                            _this.$c.toast({
                                title: res.msg,
                                duration: 500,
                                success: () => {
                                    _this.tabChange(_this.tabCur)
                                }
                            })
                        }
                    }
                }
            })
        },
        getPrize(order_num) {
            let _this = this
            if (!order_num) {
                return
            }

            setTimeout(() => {
                _this.req({
                    url: 'warehouse_prizeorderlog',
                    data: {
                        order_num
                    },
                    Loading: true,
                    success: res => {
                        if (res.status == 1) {
                            if (!res.data) {
                                // this.getPrize(order_num)
                                return
                            }

                            clearInterval(_this.intervalId)
                            _this.tabChange(_this.tabCur)
                        }
                    }
                })
            }, 500)
        },
        submitChange() {
            let data = this.handelList.map(item => {
                return {
                    prize_code: item.prize_code,
                    number: item.chooseNum
                }
            })

            this.req({
                url: 'warehouse_recovery',
                data: {
                    recovery_info: JSON.stringify(data),
                    type: this.subTab[this.subTabCur].id
                },
                success: res => {
                    if (res.status == 1) {
                        this.close('changePop')

                        this.$c.toast({
                            title: res.msg,
                            duration: 500,
                            success: () => {
                                this.tabChange(this.tabCur)
                            }
                        })
                    }
                }
            })
        },

        getChooseGoods() {
            const arr = []

            this.listData.forEach(item => {
                item.orderlist.forEach(a => {
                    const child = a
                    if (a.order_list_ids) {
                        child.order_list_ids1 = a.order_list_ids.slice(0, a.chooseNum)
                    }
                    arr.push(child)
                })
            })

            return arr.filter(item => item.chooseNum > 0)
        },

        chooseAll() {
            if (this.isAll) {
                this.listData.map(item => {
                    item.orderlist.map(a => {
                        a.chooseNum = 0
                    })
                })
            } else {
                this.listData.map(item => {
                    item.orderlist.map(a => {
                        a.chooseNum = a.prize_num
                    })
                })
            }
        },

        verifyNum(item) {
            if (item.chooseNum <= 0) {
                item.chooseNum = 0
                return
            }

            if (item.chooseNum >= item.prize_num) {
                item.chooseNum = item.prize_num
                return
            }
        },

        jian(item) {
            if (item.chooseNum <= 0) {
                item.chooseNum = 0
                return
            }

            item.chooseNum -= 1
        },

        jia(item) {
            if (item.chooseNum >= item.prize_num) {
                item.chooseNum = item.prize_num
                return
            }

            item.chooseNum += 1
        },

        subTabChange(i) {
            this.subTabCur = i
            this.listData = []

            this.mescroll.resetUpScroll()
            this.mescroll.scrollTo(0, 0)
        },

        tabChange(i) {
            this.tabCur = i

            switch (i) {
                case 0:
                    this.subTabChange(this.subTabCur)
                    break
                default:
                    this.listData = []

                    this.mescroll.resetUpScroll()
                    this.mescroll.scrollTo(0, 0)
                    break
            }
        },

        getList({ num, size }) {
            let url = 'warehouse_index'
            let data = {
                page: num
            }

            if (this.tabList[this.tabCur].id == 1) {
                data.type = this.subTab[this.subTabCur].id
                data.keyword = this.keyword
            } else {
                url = 'warehouse_send_record'
                data.status = this.tabList[this.tabCur].status
            }

            this.req({
                url,
                data,
                Loading: true,
                success: res => {
                    if (res.status == 1) {
                        if (num == 1) {
                            this.listData = []
                        }

                        if (this.tabList[this.tabCur].id == 1) {
                            res.data.data.map(item => {
                                item.orderlist.map(a => {
                                    a.chooseNum = 0
                                })
                            })

                            this.freightData = res.data.yufei
                        }

                        this.listData = this.listData.concat(res.data.data)
                        this.mescroll.endByPage(res.data.data.length, res.data.last_page)
                    }
                }
            })
        },

        close(e) {
            this.$refs[e].close()
        },

        open(e) {
            this.handelList = []
            const choose = this.getChooseGoods()

            if (choose.length <= 0) {
                this.$c.toast({
                    title: '请选择赏品'
                })
                return
            }

            this.handelList = choose

            if (e == 'model') {
                if (this.subTab[this.subTabCur].id != 4) {
                    this.lockMsg = '请问您是否要将所选择赏品放入保险柜?'
                } else {
                    this.lockMsg = '请问您是否要将所选择赏品移出保险柜?'
                }
            }

            this.$refs[e].open()
        }
    }
}
</script>

<style lang="scss">
.content {
    box-sizing: border-box;
    padding-bottom: calc(var(--window-bottom) + 150rpx);

    image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }

    .icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    // .header {
    //   width: 100%;
    //   position: fixed;
    //   left: 0;
    //   top: 0;
    //   z-index: 10;

    //   .header-left-title {
    //     height: 88rpx;
    //     font-weight: bold;
    //     color: #ffffff;
    //     display: flex;
    //     align-items: center;
    //     padding-left: 26rpx;

    //     image {
    //       width: 202rpx;
    //       height: 42rpx;
    //     }
    //   }
    // }

    .tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 30rpx;

        .tab-item {
            height: 64rpx;
            display: inline-flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            // padding: 0 24rpx;
            // margin-left: 20rpx;
            filter: grayscale(1);

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #ff1010, 0 0 2px #ff1010, 0 0 2px #ff1010,
                0 0 2px #ff1010;

            &.act {
                filter: grayscale(0);
            }

            .act-tag {
                margin: 6rpx 0 0;
                width: 42rpx;
                height: 8rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .search {
        margin-top: 20rpx;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input-box {
            width: 618rpx;
            height: 80rpx;
            border: 4rpx solid #ff0013;
            box-sizing: border-box;
            padding: 0 30rpx;
            display: flex;
            align-items: center;

            input {
                flex: 1;

                font-size: 26rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #fff;
            }
        }

        .icon {
            width: 28rpx;
            height: 28rpx;
            margin-left: 30rpx;
        }

        .rule {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;

            .que {
                width: 36rpx;
                height: 36rpx;
                margin: 0 0 4rpx;
            }

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
        }
    }

    .sub-tab {
        display: flex;
        padding: 20rpx 30rpx 0;

        .sub-tab-item {
            padding: 0 0 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;

            .bar {
                content: "";
                display: flex;
                width: 42rpx;
                height: 8rpx;
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                opacity: 0;
            }

            &.act {
                text {
                    color: #ff0013;
                }

                .bar {
                    opacity: 1;
                }
            }
        }

        .sub-tab-item + .sub-tab-item {
            margin-left: 60rpx;
        }
    }

    .num-all {
        padding: 30rpx 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;

        text {
            color: #ff0013;
        }
    }

    .list {
        margin-top: 30rpx;
        display: grid;
        grid-template-columns: repeat(3, 210rpx);
        padding: 0 30rpx;
        gap: 30rpx 30rpx;

        .list-item {
            width: 100%;
            box-sizing: border-box;

            .item-hd {
                padding: 18rpx 0 10rpx;

                .pic {
                    width: 194rpx;
                    height: 194rpx;
                    margin: 0 auto;
                    position: relative;
                    // border-radius: 10rpx;

                    .type {
                        position: absolute;
                        z-index: 1;
                        left: 0;
                        top: 0;
                        height: 34rpx;
                        padding: 0 16rpx 0 10rpx;
                        display: flex;
                        align-items: center;
                        border-radius: 10rpx 0 0 0;

                        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #ffffff;
                        text-shadow: 0 0 1px #000000, 0 0 1px #000000,
                            0 0 1px #000000, 0 0 1px #000000;
                    }

                    .num {
                        position: absolute;
                        z-index: 1;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 32rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: rgba(0, 0, 0, 0.6);
                        // border-radius: 0 0 10rpx 10rpx;

                        font-size: 24rpx;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #ffffff;
                    }
                }

                .name {
                    padding: 10rpx 10rpx 0;

                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }

                .price {
                    padding: 10rpx 10rpx 0;
                    text-align: center;

                    font-size: 20rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 300;
                    color: #cccccc;
                }
            }

            .num-box {
                margin: 16rpx 0;
                display: flex;
                justify-content: center;
                align-items: center;

                .icon {
                    width: 32rpx;
                    height: 32rpx;
                }

                input {
                    margin: 0 10rpx;
                    width: 70rpx;
                    text-align: center;

                    font-size: 24rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #fff;
                }
            }
        }
    }

    .order-list {
        padding: 1rpx 30rpx 0;

        .order-item {
            padding: 0 30rpx 30rpx;
            background: #252525;
            border: 2rpx solid #444444;
            margin-top: 30rpx;

            .order-hd {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx 0;

                .time {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }

                .status {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #e40d88;
                }
            }

            .order-bd {
                white-space: nowrap;

                .order-goods {
                    display: inline-block;
                    width: 170rpx;
                    margin-right: 20rpx;

                    &:last-child {
                        margin-right: 0;
                    }

                    .pic {
                        width: 100%;
                        height: 170rpx;
                        box-sizing: border-box;
                        border-radius: 10rpx 10rpx 10rpx 10rpx;
                        border: 2rpx solid #000000;
                        position: relative;

                        .type {
                            position: absolute;
                            z-index: 1;
                            left: 0;
                            top: 0;
                            height: 32rpx;
                            display: flex;
                            align-items: center;
                            padding: 0 14rpx;
                            background: #e4690d;

                            font-family: 光良酒-干杯体, 光良酒-干杯体;
                            font-weight: 400;
                            font-size: 20rpx;
                            color: #ffffff;
                        }

                        .num {
                            position: absolute;
                            z-index: 1;
                            left: 0;
                            bottom: 0;
                            height: 32rpx;
                            width: 100%;
                            box-sizing: border-box;
                            padding: 0 10rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: rgba(0, 0, 0, 0.6);

                            font-size: 24rpx;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #ffffff;
                        }
                    }

                    .title {
                        padding: 10rpx 10rpx 0;

                        font-size: 24rpx;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #dddddd;
                    }
                }
            }

            .line {
                margin: 20rpx 0;
                width: 100%;
                height: 1px;
                background: #333333;
            }

            .order-btns {
                display: flex;
                justify-content: flex-end;

                .btn {
                    width: 156rpx;
                    height: 64rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 30rpx;

                    // font-size: 28rpx;
                    // font-family: Source Han Sans CN;
                    // font-weight: 400;
                    // color: #222222;

                    // &.act {
                    //   background: linear-gradient(
                    //     90deg,
                    //     #6adeff 0%,
                    //     #7ab5ff 50%,
                    //     #ff7feb 100%
                    //   );
                    // }
                }
            }
        }
    }

    .right-fixed {
        position: fixed;
        z-index: 10;
        right: 20rpx;
        bottom: 300rpx;

        .fbtn {
            width: 84rpx;
            height: 84rpx;
            margin-top: 40rpx;

            &.dis {
                filter: grayscale(1);
            }
        }
    }

    .bt-fixed {
        position: fixed;
        z-index: 10;
        left: 0;
        bottom: 158rpx;
        width: 100%;
        box-sizing: border-box;
        padding: 0 0 20rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .btn {
            width: 200rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
                0 0 2px #000000;
        }
    }

    .change-pop {
        padding: 0 30rpx 30rpx;
        box-sizing: border-box;
        background-size: 100% auto;

        .change-pop-hd {
            padding: 20rpx 0 0;
            padding-left: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 36rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #e40d1d, 0 0 2px #e40d1d, 0 0 2px #e40d1d,
                0 0 2px #e40d1d;

            .close {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .hd-line {
            width: 690rpx;
            height: 2rpx;
            background: #ffffff;
            margin: 20rpx auto;
        }

        .change-pop-bd {
            padding: 30rpx 30rpx 30rpx;
            background: #cccccc;

            .bd-goods {
                white-space: nowrap;

                .goods-item {
                    display: inline-block;
                    width: 170rpx;
                    margin-right: 20rpx;

                    &:last-child {
                        margin-right: 0;
                    }

                    .pic {
                        width: 100%;
                        height: 170rpx;
                        box-sizing: border-box;
                        border-radius: 10rpx 10rpx 10rpx 10rpx;
                        border: 2rpx solid #000000;
                        position: relative;

                        .type {
                            position: absolute;
                            z-index: 1;
                            left: 0;
                            top: 0;
                            height: 32rpx;
                            display: flex;
                            align-items: center;
                            padding: 0 14rpx;
                            background: #e4690d;
                            border-radius: 10rpx 0 0 0;

                            font-family: 光良酒-干杯体, 光良酒-干杯体;
                            font-weight: 400;
                            font-size: 20rpx;
                            color: #ffffff;
                        }

                        .num {
                            position: absolute;
                            z-index: 1;
                            left: 0;
                            bottom: 0;
                            height: 32rpx;
                            width: 100%;
                            box-sizing: border-box;
                            padding: 0 10rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: rgba(0, 0, 0, 0.6);

                            font-size: 24rpx;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #ffffff;
                        }
                    }

                    .title {
                        padding: 10rpx 10rpx 0;

                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #333333;
                    }

                    .price {
                        padding: 4rpx 10rpx 0;

                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #e40d88;
                    }
                }
            }

            .bd-bt {
                margin: 20rpx 0 0;
                padding: 20rpx 0 0;
                border-top: 1rpx solid #dddddd;
                display: flex;
                justify-content: space-between;
                align-items: center;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #333333;

                text {
                    color: #e40d88;
                }
            }
        }

        .change-pop-ft {
            margin-top: 50rpx;
            height: 92rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 32rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }
    }

    .send-pop {
        padding: 0 30rpx 30rpx;
        box-sizing: border-box;
        background-size: 100% auto;

        .send-pop-hd {
            padding: 20rpx 0 0;
            padding-left: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 36rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #e40d1d, 0 0 2px #e40d1d, 0 0 2px #e40d1d,
                0 0 2px #e40d1d;

            .close {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .hd-line {
            width: 690rpx;
            height: 2rpx;
            background: #ffffff;
            margin: 20rpx auto;
        }

        .send-pop-card {
            padding: 30rpx 30rpx 30rpx;
            background: #cccccc;

            .card-goods {
                white-space: nowrap;

                .goods-item {
                    display: inline-block;
                    width: 170rpx;
                    margin-right: 20rpx;

                    &:last-child {
                        margin-right: 0;
                    }

                    .pic {
                        width: 100%;
                        height: 170rpx;
                        box-sizing: border-box;
                        border-radius: 10rpx 10rpx 10rpx 10rpx;
                        border: 2rpx solid #000000;
                        position: relative;

                        .type {
                            position: absolute;
                            z-index: 1;
                            left: 0;
                            top: 0;
                            height: 32rpx;
                            display: flex;
                            align-items: center;
                            padding: 0 14rpx;
                            background: #e4690d;
                            border-radius: 10rpx 0 0 0;

                            font-family: 光良酒-干杯体, 光良酒-干杯体;
                            font-weight: 400;
                            font-size: 20rpx;
                            color: #ffffff;
                        }

                        .num {
                            position: absolute;
                            z-index: 1;
                            left: 0;
                            bottom: 0;
                            height: 32rpx;
                            width: 100%;
                            box-sizing: border-box;
                            padding: 0 10rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: rgba(0, 0, 0, 0.6);

                            font-size: 24rpx;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #ffffff;
                        }
                    }

                    .title {
                        padding: 10rpx 10rpx 0;

                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #333333;
                    }
                }
            }

            .card-num {
                display: flex;
                justify-content: space-between;
                padding: 20rpx 0 0;
                border-top: 1rpx solid #dddddd;

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #333333;

                text {
                    color: #e40d88;
                }
            }

            .bd-bt {
                padding: 30rpx 0 0;
                text-align: right;

                font-size: 28rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;

                text {
                    font-size: 36rpx;
                    color: #d0d1ff;
                }
            }
        }

        .address {
            margin: 20rpx 0 0;
            padding: 20rpx 30rpx;
            position: relative;
            background: #cccccc;

            .add-choose {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #333333;
            }

            .add-info {
                padding-right: 60rpx;

                .name-phone {
                    display: flex;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 32rpx;
                    color: #333333;

                    .phone {
                        padding-left: 10rpx;
                    }
                }

                .add-text {
                    margin-top: 10rpx;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }
            }

            .icon {
                position: absolute;
                right: 30rpx;
                top: 50%;
                transform: translateY(-50%);

                width: 28rpx;
                height: 28rpx;
            }
        }

        .freight {
            margin: 20rpx 0 0;
            padding: 20rpx 30rpx;
            background: #cccccc;
            display: flex;
            justify-content: space-between;
            align-items: center;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;

            text {
                color: #333;
            }
        }

        .remark {
            padding: 20rpx 0 0;

            .remark-title {
                font-size: 28rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
            }

            .textarea {
                background: #cccccc;
                padding: 20rpx;
                margin-top: 20rpx;

                textarea {
                    width: 100%;
                    height: 120rpx;

                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }
            }
        }

        .border {
            border-top: 1px solid #333333;
        }

        .send-pop-ft {
            margin-top: 50rpx;
            height: 92rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: 光良酒-干杯体, 光良酒-干杯体;
            font-weight: 400;
            font-size: 32rpx;
            color: #ffffff;
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }
    }

    .model {
        width: 594rpx;
        box-sizing: border-box;

        .model-box {
            width: 594rpx;
            box-sizing: border-box;
            padding: 0 50rpx;

            .model-hd {
                padding: 40rpx 0 0;
                text-align: center;

                font-family: 光良酒-干杯体, 光良酒-干杯体;
                font-weight: 400;
                font-size: 32rpx;
                color: #ffffff;
                text-shadow: 0 0 4px #000000, 0 0 4px #000000, 0 0 4px #000000,
                    0 0 4px #000000;
            }

            .model-bd {
                padding: 0 0 50rpx;
                height: 280rpx;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;

                font-size: 32rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
            }
        }

        .model-ft {
            padding: 50rpx 0;
            display: flex;
            justify-content: space-evenly;

            .model-btn {
                width: 196rpx;
                height: 78rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                // font-size: 32rpx;
                // font-family: Source Han Sans CN;
                // font-weight: 400;
                // color: #dddddd;

                // &.act {
                //   border: 0;
                //   background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
                //   color: #222222;
                // }
            }
        }
    }
}
</style>
